﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "车间设置";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>车间设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        html, body {
            height: 100%;
            overflow: auto;
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
        }

        .layui-fluid {
            height: auto;
            min-height: 100vh;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }

        .layui-card {
            flex: none;
            display: flex;
            flex-direction: column;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
            overflow: visible;
            max-height: 85vh;
        }

        .layui-card-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: visible;
            padding: 10px;
        }

        .search-area {
            position: relative;
            margin-bottom: 15px;
            background: #fff;
            padding: 15px;
            border-radius: 2px;
            transition: all 0.3s ease;
            overflow: visible;
            flex-shrink: 0;
            z-index: 1000;
        }

        .search-area.layui-hide {
            display: none !important;
        }

        .search-area .layui-form-item {
            margin-bottom: 10px;
        }

        .search-area .layui-inline {
            margin-right: 10px;
            margin-bottom: 5px;
        }

        .search-area .layui-form-label {
            width: 70px;
            padding: 9px 10px;
        }

        .search-area .layui-input-inline {
            width: 140px;
        }

        /* 表格容器 */
        .table-container {
            flex: none;
            overflow: visible;
            background: #fff;
            border-radius: 2px;
            display: flex;
            flex-direction: column;
            height: auto;
            max-height: 60vh;
        }

        /* 表格包装器 */
        .table-wrapper {
            flex: none;
            overflow: visible;
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            height: auto;
            max-height: 450px;
        }

        /* 表格样式优化 */
        .layui-table-view {
            height: auto !important;
            border: none !important;
        }

        .layui-table-body {
            overflow: visible !important;
            max-height: 400px;
        }

        /* 确保车间编码完全显示，不被截断 */
        .layui-table-cell {
            overflow: visible !important;
            text-overflow: initial !important;
            white-space: nowrap !important;
        }
        
        .workshopCodeLink {
            display: inline-block;
            width: 100%;
            text-overflow: initial !important;
            white-space: nowrap !important;
            overflow: visible !important;
        }

        /* 分页容器样式 */
        .pagination-container {
            padding: 10px 0;
            text-align: center;
            background: #fff;
            border-top: 1px solid #e6e6e6;
            border-radius: 0 0 2px 2px;
            position: relative;
            z-index: 1;
            min-height: 50px;
            flex-shrink: 0;
            display: block !important;
            width: 100%;
            margin-top: auto;
        }

        .pagination-container .layui-laypage {
            display: inline-block !important;
            margin: 0 auto;
        }

        .pagination-container .layui-laypage a,
        .pagination-container .layui-laypage span {
            display: inline-block !important;
        }

        /* 优化分页样式 */
        .pagination-container .layui-laypage .layui-laypage-count {
            margin-right: 15px;
            color: #666;
            font-size: 14px;
        }

        .pagination-container .layui-laypage .layui-laypage-limits {
            margin-left: 15px;
        }

        .pagination-container .layui-laypage .layui-laypage-skip {
            margin-left: 15px;
        }

        .pagination-container .layui-laypage .layui-laypage-skip input {
            margin: 0 5px;
            text-align: center;
            width: 50px !important;
            height: 30px !important;
        }

        .pagination-container .layui-laypage .layui-laypage-btn {
            margin-left: 5px;
            padding: 5px 10px;
            background: #1E9FFF;
            color: #fff;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            height: 30px;
            line-height: 20px;
        }

        .pagination-container .layui-laypage .layui-laypage-btn:hover {
            background: #0078d4;
        }

        /* 确保分页组件正确显示 */
        .pagination-container .layui-laypage-limits select {
            height: 30px;
            line-height: 30px;
        }

        /* 确保页面内容不会溢出 */
        @@media screen and (max-height: 800px) {
            .table-wrapper {
                max-height: 350px;
            }
            .layui-table-body {
                max-height: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 搜索栏 -->
                <div class="search-area">
                    <form class="layui-form layui-form-pane" lay-filter="searchForm">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">车间编码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="workshopCode" placeholder="车间编码" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">车间名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="workshopName" placeholder="车间名称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">是否启用</label>
                                <div class="layui-input-inline">
                                    <select name="isActive">
                                        <option value="">选择是或否</option>
                                        <option value="true">是</option>
                                        <option value="false">否</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="search">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon layui-icon-refresh"></i> 重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 表格工具栏 -->
                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add">
                            <i class="layui-icon layui-icon-add-1"></i> 新增
                        </button>
                        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="batchDelete">
                            <i class="layui-icon layui-icon-delete"></i> 批量删除
                        </button>
                    </div>
                </script>

                <!-- 表格容器 -->
                <div class="table-container">
                    <div class="table-wrapper">
                        <table id="workshopTable" lay-filter="workshopTable"></table>
                    </div>
                    <div id="workshopTablePage" class="pagination-container"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <!-- 启用状态模板 -->
    <script type="text/html" id="isActiveTpl">
        {{#  if(d.isActive){ }}
            <span class="layui-badge layui-bg-green">是</span>
        {{#  } else { }}
            <span class="layui-badge layui-bg-gray">否</span>
        {{#  } }}
    </script>

    <!-- 车间编码模板（可点击编辑） -->
    <script type="text/html" id="workshopCodeTpl">
        <a href="javascript:;" class="workshopCodeLink" style="color: #1E9FFF;" data-id="{{d.id}}">{{d.workshopCode}}</a>
    </script>

    <!-- 添加/修改弹窗 -->
    <script type="text/html" id="editFormTpl">
        <form class="layui-form" lay-filter="editForm" style="padding: 20px;">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">车间编码 <span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <div class="layui-input-group">
                        <input type="text" name="workshopCode" required lay-verify="required" placeholder="请输入车间编码" autocomplete="off" class="layui-input">
                        <div class="layui-input-suffix">
                            <div class="layui-form-mid" style="padding: 0 10px;">
                                <input type="checkbox" id="autoGenerate" title="自动生成" lay-skin="switch" lay-text="是|否">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">车间名称 <span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="workshopName" required lay-verify="required" placeholder="请输入车间名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">面积</label>
                <div class="layui-input-block">
                    <input type="number" name="area" value="0" min="0" step="0.01" placeholder="请输入面积" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">负责人</label>
                <div class="layui-input-block">
                    <input type="text" name="manager" placeholder="请输入负责人" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-block">
                    <input type="radio" name="isActive" value="true" title="是" checked>
                    <input type="radio" name="isActive" value="false" title="否">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item" style="text-align: center; margin-top: 30px;">
                <button class="layui-btn" lay-submit lay-filter="editFormSubmit">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </script>

    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table,
                form = layui.form,
                layer = layui.layer;

            // 当前查询参数
            var currentParams = {
                page: 1,
                limit: 10,
                workshopCode: '',
                workshopName: '',
                isActive: null
            };

            // 初始化表单
            form.render();

            // 加载表格数据
            function loadTableData(params) {
                params = params || currentParams;
                console.log('加载表格数据，参数:', params);
                
                var loadIndex = layer.load(2);
                
                $.ajax({
                    url: '/Workshop/GetList',
                    type: 'GET',
                    data: params,
                    success: function(res) {
                        layer.close(loadIndex);
                        console.log('获取数据响应:', res);
                        
                        if (res.code === 0) {
                            // 更新当前参数
                            currentParams = Object.assign(currentParams, params);
                            
                            // 渲染表格
                            renderTable(res.data, res.count);
                        } else {
                            layer.msg('获取数据失败: ' + res.msg, {icon: 2});
                            renderTable([], 0);
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.close(loadIndex);
                        console.error('获取数据失败:', xhr, status, error);
                        layer.msg('获取数据失败: ' + error, {icon: 2});
                        renderTable([], 0);
                    }
                });
            }

            // 渲染表格
            function renderTable(data, count) {
                console.log('渲染表格，数据条数:', data.length, '总数:', count);
                
                table.render({
                    elem: '#workshopTable',
                    data: data,
                    toolbar: '#toolbarDemo',
                    defaultToolbar: [
                        {title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh'},
                        {title: '搜索', layEvent: 'search', icon: 'layui-icon-search'}
                    ],
                    page: false, // 禁用layui自带分页
                    cols: [[
                        {type: 'checkbox', fixed: 'left', width: 50},
                        {field: 'id', title: 'ID', width: 80, hide: true},
                        {field: 'workshopCode', title: '车间编码', width: 160, templet: '#workshopCodeTpl'},
                        {field: 'workshopName', title: '车间名称', width: 140},
                        {field: 'area', title: '面积', width: 80, align: 'center'},
                        {field: 'manager', title: '负责人', width: 100, align: 'center'},
                        {field: 'isActive', title: '是否启用', width: 100, templet: '#isActiveTpl', align: 'center'},
                        {field: 'remark', title: '备注', minWidth: 200},
                        {title: '操作', toolbar: '#operationBar', width: 120, fixed: 'right', align: 'center'}
                    ]],
                    done: function() {
                        console.log('表格渲染完成，开始渲染分页，count:', count);
                        // 渲染自定义分页
                        setTimeout(function() {
                            renderPagination(count || data.length);
                        }, 100);
                    }
                });
            }

            // 渲染分页 - 简化版本
            function renderPagination(count) {
                console.log('开始渲染分页，总数:', count);
                var pageContainer = $('#workshopTablePage');
                
                if (pageContainer.length === 0) {
                    console.error('分页容器未找到！');
                    return;
                }
                
                console.log('找到分页容器，容器可见:', pageContainer.is(':visible'));
                
                // 强制显示容器
                pageContainer.show().css({
                    'display': 'block',
                    'visibility': 'visible',
                    'opacity': '1'
                });
                
                if (!count || count === 0) {
                    pageContainer.html('<div style="text-align: center; padding: 20px; color: #999; background: #fff; border-top: 1px solid #e6e6e6;">暂无数据</div>');
                    return;
                }
                
                // 简化的分页HTML
                var totalPages = Math.ceil(count / currentParams.limit);
                var currentPage = currentParams.page || 1;
                
                var paginationHtml = '<div style="text-align: center; padding: 15px; background: #fff; border-top: 1px solid #e6e6e6;">';
                
                // 基本分页控件
                paginationHtml += '<span style="margin-right: 20px; font-size: 14px; color: #666;">共 ' + count + ' 条记录</span>';
                
                // 上一页
                if (currentPage > 1) {
                    paginationHtml += '<button class="layui-btn layui-btn-sm" data-page="' + (currentPage - 1) + '" onclick="changePage(' + (currentPage - 1) + ')" style="margin: 0 5px;">上一页</button>';
                } else {
                    paginationHtml += '<button class="layui-btn layui-btn-sm layui-btn-disabled" disabled style="margin: 0 5px;">上一页</button>';
                }
                
                // 当前页显示
                paginationHtml += '<span style="margin: 0 15px; font-size: 14px; color: #333;">第 ' + currentPage + ' 页 / 共 ' + totalPages + ' 页</span>';
                
                // 下一页
                if (currentPage < totalPages) {
                    paginationHtml += '<button class="layui-btn layui-btn-sm" data-page="' + (currentPage + 1) + '" onclick="changePage(' + (currentPage + 1) + ')" style="margin: 0 5px;">下一页</button>';
                } else {
                    paginationHtml += '<button class="layui-btn layui-btn-sm layui-btn-disabled" disabled style="margin: 0 5px;">下一页</button>';
                }
                
                // 每页条数选择 - 简化选项
                paginationHtml += '<span style="margin-left: 20px; font-size: 14px; color: #666;">每页 ';
                paginationHtml += '<select id="limitSelect" onchange="changeLimit(this.value)" style="padding: 5px; margin: 0 5px; border: 1px solid #ddd; border-radius: 2px;">';
                var limits = [10, 20, 30];
                for (var i = 0; i < limits.length; i++) {
                    var selected = limits[i] === currentParams.limit ? 'selected' : '';
                    paginationHtml += '<option value="' + limits[i] + '" ' + selected + '>' + limits[i] + '</option>';
                }
                paginationHtml += '</select> 条</span>';
                
                paginationHtml += '</div>';
                
                console.log('设置分页HTML');
                pageContainer.html(paginationHtml);
                
                console.log('分页渲染完成，容器内容:', pageContainer.html().substring(0, 100));
            }

            // 全局分页函数
            window.changePage = function(page) {
                console.log('切换到第', page, '页');
                currentParams.page = page;
                loadTableData(currentParams);
            };

            window.changeLimit = function(limit) {
                console.log('切换每页条数:', limit);
                currentParams.limit = parseInt(limit);
                currentParams.page = 1;
                loadTableData(currentParams);
            };

            // 测试API连接
            function testApi() {
                console.log('测试API连接...');
                $.ajax({
                    url: '/Workshop/Test',
                    type: 'GET',
                    success: function(res) {
                        console.log('测试API响应:', res);
                        if (res.success) {
                            console.log('API连接正常，数据总数:', res.totalCount);
                            loadTableData(); // 加载表格数据
                        } else {
                            console.error('API测试失败:', res.message);
                            layer.msg('API测试失败: ' + res.message, {icon: 2});
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('API测试请求失败:', {
                            status: xhr.status,
                            statusText: xhr.statusText,
                            responseText: xhr.responseText,
                            error: error
                        });
                        layer.msg('API连接失败: ' + xhr.status + ' ' + xhr.statusText, {icon: 2});
                    }
                });
            }

            // 监听工具栏事件
            table.on('toolbar(workshopTable)', function (obj) {
                console.log('工具栏事件:', obj.event);
                switch (obj.event) {
                    case 'add':
                        openEditForm();
                        break;
                    case 'batchDelete':
                        var checkStatus = table.checkStatus('workshopTable');
                        var data = checkStatus.data;
                        
                        if(data.length === 0) {
                            layer.msg('请选择要删除的数据', {icon: 2});
                            return;
                        }
                        
                        var ids = data.map(function(item) {
                            return item.id;
                        });
                        
                        layer.confirm('确定要删除选中的 ' + data.length + ' 条数据吗？', {
                            title: '批量删除确认',
                            icon: 3
                        }, function(index) {
                            deleteWorkshops(ids);
                            layer.close(index);
                        });
                        break;
                    case 'refresh':
                        loadTableData(currentParams); // 刷新当前页数据
                        break;
                    case 'search':
                        // 切换搜索区域显示/隐藏
                        var searchArea = $('.search-area');
                        if (searchArea.hasClass('layui-hide')) {
                            searchArea.removeClass('layui-hide');
                            layer.msg('已显示搜索区域', {icon: 1});
                        } else {
                            searchArea.addClass('layui-hide');
                            layer.msg('已隐藏搜索区域', {icon: 1});
                        }
                        break;
                }
            });

            // 点击车间编码进行编辑
            $(document).on('click', '.workshopCodeLink', function() {
                var id = $(this).data('id');
                console.log('点击车间编码，ID:', id);
                openEditForm(id);
            });

            // 监听行工具事件
            table.on('tool(workshopTable)', function (obj) {
                var data = obj.data;
                console.log('行工具事件:', obj.event, '数据:', data);
                
                if (obj.event === 'edit') {
                    openEditForm(data.id);
                } else if (obj.event === 'delete') {
                    layer.confirm('确定要删除这条数据吗？', {icon: 3, title: '删除确认'}, function(index) {
                        deleteWorkshops([data.id]);
                        layer.close(index);
                    });
                }
            });

            // 打开编辑表单
            function openEditForm(id) {
                console.log('打开编辑表单，ID:', id);
                var title = id ? '修改车间' : '添加车间';
                layer.open({
                    type: 1,
                    title: title,
                    area: ['500px', '600px'],
                    content: $('#editFormTpl').html(),
                    success: function (layero, index) {
                        form.render();
                        
                        if (id) {
                            // 编辑模式，加载数据
                            loadWorkshopData(id, layero);
                        } else {
                            // 新增模式，默认开启自动生成
                            layero.find('#autoGenerate').prop('checked', true);
                            form.render('checkbox');
                            generateWorkshopCode(layero);
                            layero.find('input[name="workshopCode"]').prop('readonly', true);
                        }

                        // 监听自动生成开关
                        layero.find('#autoGenerate').on('click', function() {
                            var checked = $(this).prop('checked');
                            var codeInput = layero.find('input[name="workshopCode"]');
                            if(checked) {
                                generateWorkshopCode(layero);
                                codeInput.prop('readonly', true);
                            } else {
                                codeInput.prop('readonly', false);
                            }
                        });
                    }
                });
            }

            // 加载车间数据
            function loadWorkshopData(id, layero) {
                console.log('加载车间数据，ID:', id);
                $.ajax({
                    url: '/Workshop/GetById',
                    type: 'GET',
                    data: { id: id },
                    success: function(res) {
                        console.log('获取车间详情响应:', res);
                        if(res.success) {
                            var data = res.data;
                            form.val('editForm', {
                                'id': data.id,
                                'workshopCode': data.workshopCode,
                                'workshopName': data.workshopName,
                                'area': data.area,
                                'manager': data.manager || '',
                                'remark': data.remark || '',
                                'isActive': data.isActive.toString()
                            });
                        } else {
                            layer.msg('加载数据失败：' + res.message, {icon: 2});
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('加载车间数据失败:', xhr, status, error);
                        layer.msg('加载数据失败', {icon: 2});
                    }
                });
            }

            // 生成车间编码
            function generateWorkshopCode(layero) {
                console.log('生成车间编码...');
                $.ajax({
                    url: '/Workshop/GenerateCode',
                    type: 'GET',
                    success: function(res) {
                        console.log('生成编码响应:', res);
                        if(res.success) {
                            layero.find('input[name="workshopCode"]').val(res.code);
                        } else {
                            layer.msg('生成编码失败：' + res.message, {icon: 2});
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('生成车间编码失败:', xhr, status, error);
                        layer.msg('生成编码失败', {icon: 2});
                    }
                });
            }

            // 监听表单提交
            form.on('submit(editFormSubmit)', function (data) {
                console.log('提交表单...');
                var loadIndex = layer.load(2);
                var field = data.field;
                
                console.log('表单数据:', field);
                
                // 构建提交数据
                var submitData = {
                    workshopCode: field.workshopCode,
                    workshopName: field.workshopName,
                    area: parseFloat(field.area) || 0,
                    manager: field.manager || '',
                    isActive: field.isActive === 'true',
                    remark: field.remark || ''
                };

                // 如果是编辑模式，添加ID
                if (field.id) {
                    submitData.id = parseInt(field.id);
                }

                var url = submitData.id ? '/Workshop/Update' : '/Workshop/Create';

                console.log('提交数据:', submitData);
                console.log('提交URL:', url);

                $.ajax({
                    url: url,
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(submitData),
                    success: function (res) {
                        layer.close(loadIndex);
                        console.log('提交响应:', res);
                        if (res.success) {
                            layer.closeAll('page');
                            layer.msg('保存成功');
                            loadTableData(currentParams); // 重新加载当前页数据
                        } else {
                            layer.msg(res.message || '保存失败');
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.close(loadIndex);
                        console.error('提交失败:', xhr, status, error);
                        var errorMsg = '保存失败';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg += '：' + xhr.responseJSON.message;
                        } else if (xhr.responseText) {
                            errorMsg += '：' + xhr.responseText;
                        }
                        layer.msg(errorMsg);
                    }
                });
                return false;
            });

            // 删除车间
            function deleteWorkshops(ids) {
                console.log('删除车间，IDs:', ids);
                var loadIndex = layer.load(2);
                $.ajax({
                    url: '/Workshop/Delete',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(ids),
                    success: function(res) {
                        layer.close(loadIndex);
                        console.log('删除响应:', res);
                        if(res.success) {
                            layer.msg('删除成功', {icon: 1});
                            loadTableData(currentParams); // 重新加载当前页数据
                        } else {
                            layer.msg('删除失败：' + res.message, {icon: 2});
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.close(loadIndex);
                        console.error('删除失败:', xhr, status, error);
                        layer.msg('删除失败', {icon: 2});
                    }
                });
            }

            // 监听搜索
            form.on('submit(search)', function (data) {
                console.log('搜索参数:', data.field);
                // 重置到第一页并应用搜索条件
                var searchParams = Object.assign({}, currentParams, data.field, { page: 1 });
                loadTableData(searchParams);
                return false;
            });

            // 监听表单重置
            $('.search-area form').on('reset', function() {
                setTimeout(function() {
                    console.log('重置搜索条件');
                    // 重置搜索参数
                    var resetParams = {
                        page: 1,
                        limit: currentParams.limit,
                        workshopCode: '',
                        workshopName: '',
                        isActive: null
                    };
                    loadTableData(resetParams);
                    layer.msg('已重置搜索条件');
                }, 100);
            });

            // 监听启用状态下拉框变化
            form.on('select()', function(data){
                console.log('下拉框选择:', data.value, data.othis);
            });

            // 页面加载完成后开始测试
            console.log('页面加载完成，开始测试API...');
            
            // 确保表单正确渲染
            setTimeout(function() {
                form.render();
                console.log('表单渲染完成');
                
                // 测试分页容器是否存在
                var paginationContainer = $('#workshopTablePage');
                console.log('分页容器是否存在:', paginationContainer.length > 0);
                if (paginationContainer.length > 0) {
                    console.log('分页容器样式:', paginationContainer.attr('class'));
                    // 立即显示测试分页
                    paginationContainer.html('<div style="text-align: center; padding: 15px; background: #f0f0f0; border: 1px solid #ddd; color: #333;">测试分页显示 - 数据加载中...</div>');
                    paginationContainer.show().css({
                        'display': 'block !important',
                        'visibility': 'visible',
                        'opacity': '1'
                    });
                    console.log('测试分页已显示');
                }
            }, 300);
            
            // 延迟一点再测试API，确保分页容器先显示
            setTimeout(function() {
                testApi();
            }, 500);
        });
    </script>
</body>
</html>
